<div id="hand_div" class="hand" style="margin-top: -25px;height: 205px">
  <ul class="thumbnails">
    <li id="card1" class="card_holder hide">
      <span class="label label-important card_pos" style="opacity: 0;">1</span>
      <a href="#" class="thumbnail">
        <img class="card" name="0">
      </a>
    </li>
    <li id="card2" class="card_holder hide">
      <span class="label label-important card_pos" style="opacity: 0;">1</span>
      <a href="#" class="thumbnail">
        <img class="card" name="1">
      </a>
    </li>
    <li id="card3" class="card_holder hide">
      <span class="label label-important card_pos" style="opacity: 0;">1</span>
      <a href="#" class="thumbnail">
        <img class="card" name="2">
      </a>
    </li>
    <li id="card4" class="card_holder hide">
      <span class="label label-important card_pos" style="opacity: 0;">1</span>
      <a href="#" class="thumbnail">
        <img class="card" name="3">
      </a>
    </li>
    <li id="card5" class="card_holder hide">
      <span class="label label-important card_pos" style="opacity: 0;">1</span>
      <a href="#" class="thumbnail">
        <img class="card" name="4">
      </a>
    </li>
  </ul>
</div>
<script>
$(document).ready(function() {
	window.maxCardPos = 0;
	$(".card_holder").draggable({ revert: true });
	$(".card_holder").click(function(i, object){
		if($(this).hasClass("card-clicked")){
			maxCardPos--;

			index = -1;
			for (j = 0; j < clickedCards.length; j++) {
				if (clickedCards[j].html() == $(this).html()){
					index = j;
				}
			}

			clickedCards.splice(index, 1);
			$(this).removeClass("card-clicked");
			$(this).animate({'margin-top': '+=30px' }, "fast");
			var removedNumber = parseInt($(this).find(".card_pos").text());
			$(this).find(".card_pos").animate({opacity: 0.0}, "fast", function(){
				$("#hand_div").find(".card_pos").each(function(i, object){
					var number = parseInt($(object).text());
					if (number > removedNumber){
						$(object).text(number - 1);
					}
	      });
			});
		}
		else {
			maxCardPos++;
			clickedCards.push($(this));
			$(this).addClass("card-clicked");
		  $(this).animate({'margin-top': '-=30px' }, "fast");
		  $(this).find(".card_pos").animate({opacity: 1.0}, "slow");
		  $(this).find(".card_pos").text(maxCardPos);
		}
	});
	$(".self-played_card").droppable({
		hoverClass: "fadebg",
	  accept: ".dry_play",
	  drop: function (event, ui) {
      var droppedCard = $(this);
      if (!droppedCard.parent().hasClass("dry_play")) {
    	  return;
      }
		  var draggedCard = ui.draggable.find("img");
      swapCardInfo(draggedCard, droppedCard);
	  }
	});
	$("#card1").droppable({
		hoverClass: "fadebg",
		accept: ".dry_play",
		drop: function (event, ui) {
      var selectedCards = new Array();
      var selectedCardIndeces = new Array();

      selectedCards.push("back");
      selectedCardIndeces.push(ui.draggable.find("img").attr("rel"));
      event.preventDefault();
      console.log("selected " + selectedCards)

      var playType = "undry";
      var metadata = ["cards:" + selectedCards.join(","), "card_indeces:" + selectedCardIndeces.join(",")];
      var metadataMap = {"cards": selectedCards.join(","), "card_indeces": selectedCardIndeces.join(",")};
      $.post("/makePlay/", {"play_type":"undry", "game_id":'{{ game.id }}', "metadata": metadata})
        .success(function(data) {
          var errors = data["errors"];
          if(errors && errors.length > 0) {
            alert(errors[0]);
            updateGameState();
          } else {

        	  var cardNumber = data["response"]["card_numbers"];
        	  var draggedCard = ui.draggable.find("img");
        	  var hiddenCard = $("#played-card-" + window.currentPlayer + "-" + cardNumber);
        	  draggedCard.attr("src", hiddenCard.attr("src"));
        	  draggedCard.attr("fileFormat", hiddenCard.attr("fileFormat"));
        	  draggedCard.attr("rel", hiddenCard.attr("rel"));
        	  draggedCard.attr("play_type", hiddenCard.attr("play_type"));

            var playId = data["play_id"];
            metadata.push("message:" + data["response"]["message"]);
            metadataMap["message"] = data["response"]["message"];
            metadata.push("card_numbers:" + cardNumber);
              metadataMap["card_numbers"] = cardNumber;
            $(".card-clicked").click();
            var mex = "GAME_PLAY|{{ game.id }}|{{ profile.id }}|{{ profile.name }}|" + playType + "|" + metadata.join("|");
            engineRef.sendMessage(mex, null, 5000);
            processDrop(metadataMap, "{{ profile.id }}", "{{ profile.name }}", playType, data["response"]["message"]);
          }
        });
		}
	});

	function swapCardInfo(draggedCard, droppedCard) {
		var draggedCardSrc = draggedCard.attr("src");
		var draggedCardFileFormat = draggedCard.attr("fileFormat");
		var draggedCardRel = draggedCard.attr("rel");

		draggedCard.attr("src", droppedCard.attr("src"));
    draggedCard.attr("fileFormat", droppedCard.attr("fileFormat"));
    draggedCard.attr("rel", droppedCard.attr("rel"));

    droppedCard.attr("src", draggedCardSrc);
    droppedCard.attr("fileFormat", draggedCardFileFormat);
    droppedCard.attr("rel", draggedCardRel);
	}
});
</script>